<template>
  <Dialog
    v-model="show"
    :title="t('table_setting.桌位二维码')"
    width="500px"
    @confirm="handleConfirm"
    @close="handleClose"
    :confirmText="t('table_setting.下载')"
  >
    <div class="flex_aic_jcc">
      <qrcode-vue id="qrcodeRef" :value="codeUrl" :size="200" level="H" />
    </div>
  </Dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import QrcodeVue from "qrcode.vue";

const { t } = useI18n();
const show = defineModel("show", {
  type: Boolean,
  default: false,
});
const emit = defineEmits(["update:show", "refresh"]);
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const codeUrl = ref("123123123");
watch(
  () => show.value,
  (newVal) => {
    if (newVal) {
      const user = Storage.get("user", true);
      codeUrl.value = `https://shopapi.migukj.com/?shopId=${user.tenant?.id}&tableId=${props.data.id}`;
    }
  }
);

const handleConfirm = () => {
  const canvas = document.getElementById("qrcodeRef");
  const url = canvas.toDataURL("image/png"); // 通过 toDataURL 返回一个包含图片展示的 data URI
  const aDom = document.createElement("a");
  aDom.download = props.data.code; // 设置下载的文件名
  aDom.href = url;
  document.body.appendChild(aDom);
  aDom.click();
  aDom.remove();
};
const handleClose = () => {
  emit("update:show", false);
};
</script>
<style lang="scss" scoped></style>
